<template>
   <div>
       <!-- 二级路由坑 -->
       <router-view v-if="$route.path=='/home/search'"></router-view>
       <div v-else>
             <!-- 搜索框 -->
               <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" @click="searchFn"  />
               <!-- 轮播图 -->
               <Swiper :arr="bannerArr"></Swiper>
               <!-- 图标导航 -->
               <van-grid :column-num="5">
               <van-grid-item 
                  v-for="item in channel" 
                  :key="item.id" 
                  :icon="item.icon_url" 
                  :text="item.name" />
               </van-grid>
               <!-- 品牌制造商 -->
               <Brand :brandArr="brandArr"></Brand>
       </div>
       

      

   </div>
</template>

<script>

  
import { getIndexDataApi } from "@/utils/https.js"
import Swiper from "@/components/Swiper.vue"
import Brand from "@/components/Brand.vue"
export default {
       components:{Swiper,Brand},
       data(){return {
                       value:"",
                       bannerArr:[],
                       channel:[],
                       brandArr:[]
                      }
                      },
       created(){
         //请求数据   res接受的就是成功返回的数据
           getIndexDataApi().then(res=>{
            console.log(res)
            this.bannerArr=res.data.banner
            this.channel=res.data.channel
            this.brandArr=res.data.brandList
           })  
       },
       methods:{
         searchFn(){
            this.$router.push("/home/search")
            console.log(this.$route.path)///home/search
         }
       }
        

}
</script>

<style>

</style>